import { useState, useEffect } from 'react';
import ProCard from '@ant-design/pro-card';
import { Button, Cascader, Col, DatePicker, Form, Input, Row, Select } from 'antd';
import styles from '../../index.less';
import InformationModal from '@/components/InformationModal';
import { PlusCircleOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

export type DemandFormProps = {
  goBack: () => void;
  onChange?: (value?: string) => void;
};

const DemandForm: React.FC<DemandFormProps> = (props) => {
  const [form] = Form.useForm();
  const [positionDetail, setPositionDetail] = useState(false);

  const [formData, setFormData] = useState({ name: '', Reserve: 0, address: '', company: '' });
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('');

  useEffect(() => {
    setFormData(form.getFieldsValue());
  }, [form]);

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 2 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
    setModalText('您确认提交用人申请吗');
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 1000);
  };
  const options = [
    {
      value: '东中国区',
      label: '东中国区',
      children: [
        {
          value: '解决方案中心',
          label: '解决方案中心',
        },
      ],
    },
    {
      value: '南中国区',
      label: '南中国区',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
        },
      ],
    },
  ];

  const onChange = (value: any, selectedOptions: any) => {
    console.log(value, selectedOptions);
  };

  const filter = (inputValue: string, path: any[]) => {
    return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  };

  return (
    <>
      <ProCard title="" headerBordered direction="column">
        <Form
          style={{ marginTop: 34 }}
          {...formItemLayout}
          form={form}
          onFinish={onFinish}
          layout="horizontal"
          onValuesChange={(changedValues, allValues) => {
            setFormData(allValues);
          }}
        >
          <Form.Item
            label="申请部门"
            required
            name="template"
            initialValue={['东中国区', '解决方案中心']}
          >
            <Cascader
              style={{ width: 210 }}
              options={options}
              onChange={onChange}
              placeholder="Please select"
              showSearch={{ filter }}
            />
          </Form.Item>
          <Form.Item label="需求职位" required style={{ marginBottom: 0, height: '55px' }}>
            <Row>
              <Form.Item name="need" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">产品经理</Option>
                  <Option value="2">产品助理</Option>
                  <Option value="3">前端开发</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined
                className={styles.plusCircle}
                style={{ marginRight: '14px' }}
                onClick={() => {
                  setPositionDetail(!positionDetail);
                }}
              />
              {positionDetail && (
                <Form.Item name="positionDetail" initialValue="">
                  <TextArea
                    showCount
                    placeholder="新增岗位描述"
                    maxLength={50}
                    onChange={(e) => {
                      console.log('Change:', e.target.value);
                    }}
                  />
                </Form.Item>
              )}
            </Row>
          </Form.Item>
          <Form.Item label="需求性别" required name="channel" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">不限</Option>
              <Option value="2">男</Option>
              <Option value="3">女</Option>
            </Select>
          </Form.Item>
          <Form.Item label="需求年龄" required name="age" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">不限</Option>
              <Option value="2">18~24岁</Option>
              <Option value="3">24~30岁</Option>
              <Option value="4">30岁以上</Option>
            </Select>
          </Form.Item>
          <Form.Item label="工作年限" required name="year" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">不限</Option>
              <Option value="2">1年以下</Option>
              <Option value="3">1~3年</Option>
              <Option value="4">3~5年</Option>
              <Option value="5">5~10年</Option>
              <Option value="6">10年以上</Option>
            </Select>
          </Form.Item>
          <Form.Item label="需求学历" required name="stu" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">不限</Option>
              <Option value="2">大专及以上</Option>
              <Option value="3">本科及以上</Option>
              <Option value="4">硕士及以上</Option>
            </Select>
          </Form.Item>
          <Form.Item label="需求类型" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="type" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">员工离职补位</Option>
                  <Option value="2">团队扩建</Option>
                  <Option value="3">工作负载过量</Option>
                  <Option value="4">其他</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="用人原因" required name="name" initialValue="">
            <TextArea rows={4} placeholder="请表述用人原因" style={{ width: '464px' }} />
          </Form.Item>
          <Form.Item label="建议一面面试官" required name="inte1" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">曹孟阳</Option>
              <Option value="2">焦凯</Option>
              <Option value="3">张玲烨</Option>
            </Select>
          </Form.Item>
          <Form.Item label="建议二面面试官" name="inte2" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">焦凯</Option>
              <Option value="2">张玲烨</Option>
            </Select>
          </Form.Item>
          <Form.Item label="紧急程度" required name="warry" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">紧急</Option>
              <Option value="2">一般</Option>
            </Select>
          </Form.Item>
          <Form.Item label="建议开始时间" name="Reserve">
            <DatePicker style={{ width: 210 }} placeholder="请选择日期" />
          </Form.Item>
          <Row>
            <Col span={24} className={styles.createbtn}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button
                type="primary"
                style={{ margin: '0 8px' }}
                onClick={() => {
                  form.resetFields();
                  setPositionDetail(false);
                }}
              >
                重置
              </Button>
              <Button style={{ margin: '0 8px' }} onClick={() => props.goBack()}>
                返回
              </Button>
            </Col>
          </Row>
        </Form>

        <InformationModal
          visible={visible}
          modalText={modalText}
          confirmLoading={confirmLoading}
          showModalBtn
          handleOk={() => handleOk()}
          onCancel={() => setVisible(false)}
        />
      </ProCard>
    </>
  );
};
export default DemandForm;
